<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/assets/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-fluid" style="padding-top: 15px;">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-inline">
              <input type="text" id="id" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
              <input type="text" id="name" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">添加时间</label>
            <div class="layui-input-inline">
              <input type="text" id="add_time" name="add_time" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">文章标签</label>
            <div class="layui-input-inline">
              <select name="label">
                <option value="">请选择标签</option>
                <option value="0">美食</option>
                <option value="1">新闻</option>
                <option value="2">八卦</option>
                <option value="3">体育</option>
                <option value="4">音乐</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-list" data-type="reload">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button onclick="location.href='add'" class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
        </div>
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
  		 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  		 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
      </div>
    </div>
  </div> 
          
<script src="/assets/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
 
<script>
layui.use(['jquery', 'table','laydate'], function(){
	var $ = layui.$;
	var table = layui.table;
  
  var laydate = layui.laydate;
  laydate.render({
	    elem: '#test1'
	  });
  table.render({
    elem: '#test'
    ,url:'index.json'
    ,toolbar: true
    ,title: '用户数据表'
    ,totalRow: false//数据统计行
    ,cols: [[
      #for(col : cols)
      {field:'#(col.column_name)', title:'#(col.column_comment)',sort: true, fixed: true},
      #end
      {title:'操作',toolbar: '#barDemo'}
    ]]
  	,id:'table1'
    ,page: true
    ,response: {
      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
    }
    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
      return {
    	  "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.count, //解析数据长度
          "data": res.list //解析数据列表
      };
    }
  });
  
  table.on('tool(test)', function(obj){
	    var data = obj.data;
	    if(obj.event === 'detail'){
	    	location.href="view?id="+data.id
	    } else if(obj.event === 'del'){
	      layer.confirm('真的删除该条记录么', function(index){
	    	  $.ajax({url:'del.json?id='+data.id,success:function(data){
	      		if(data.code==200){
	      			obj.del();
	    	        layer.close(index);
	      		}
	      	}
	      });
	      });
	    } else if(obj.event === 'edit'){
	      location.href="edit?id="+data.id
	    }
	});
  
  var active = {
		    reload: function(){
		      var id1 = $('#id');
		      var name1 = $('#name');
		      var add_time1 = $('#add_time');
		      //执行重载
		      table.reload('table1', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		            id: id1.val(),
		            name: name1.val(),
		            add_time: add_time1.val()
		        }
		      });
		    }
	};
  $('.layui-form .layui-btn').on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	});
});
</script>

</body>
</html>